<template>
  <div class="cell-item van-hairline--bottom flex flex-center">
    <span class="flex1">
      {{ title }}
      <slot />
    </span>
    <div class="cell-right flex">
      <slot name="right" />
      <span class="iconfont iconjinru dept-icon" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cell',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    return {
      ...props
    };
  }
};
</script>

<style lang="scss" scoped>
.cell-item {
  padding: 36px 30px 36px 54px;
  background: #fff;
  font-size: 32px;
  font-weight: 500;
  color: #373d52;
  .cell-icon {
    font-size: 26px;
    font-weight: bold;
    color: #a2a6b8;
  }

  .cell-right {
    color: #a2a6b8;
  }
}
</style>